<script setup>
import { ref, computed } from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { legacyLogicalPropertiesTransformer, theme } from 'ant-design-vue';
import { AppstoreOutlined } from '@ant-design/icons-vue';
import layoutHeader from './layout-header.vue'
import layoutMenu from './layout-menu.vue';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const activeName = ref('患者数据管理');
const activeTheme = ref('light');

const algorithm = computed(() => activeTheme.value === 'dark' ? theme.darkAlgorithm : theme.lightAlgorithm);

function onMenuChange(item) {
    activeName.value = item.item.originItemValue.label
}

function toggleTheme(value) {
    const html = document.documentElement;
    html.setAttribute("data-theme", value);
    activeTheme.value = value;
};


</script>

<template>
    <a-config-provider :theme="{ algorithm: algorithm }" :locale="zhCN">
        <a-style-provider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
            <a-app>
                <div class="layout">
                    <a-watermark :content="userStore.userName" :gap="[80, 80]">
                        <layout-header @changeTheme="toggleTheme" />
                        <div class="layout-container">
                            <div>
                                <layout-menu @change="onMenuChange" />
                            </div>
                            <div class="layout-main">
                                <div class="breadcrumb">
                                    <AppstoreOutlined />
                                    <span>{{ activeName }}</span>
                                </div>
                                <div class="layout-body">
                                    <router-view v-slot="{ Component }">
                                        <transition name="fade" mode="out-in">
                                            <component :is="Component" />
                                        </transition>
                                    </router-view>
                                </div>
                            </div>
                        </div>
                    </a-watermark>
                </div>
            </a-app>
        </a-style-provider>
    </a-config-provider>
</template>

<style lang="less" scoped>
.layout {
    width: 100vw;
    height: 100vh;
    background-color: @bg-color;

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s ease;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }

    .layout-container {
        display: flex;

        .layout-main {
            flex: 1;
            .breadcrumb {
                padding: 14px 14px 0;
                width: 100%;

                span {
                    margin-left: 14px;
                    font-size: 14px;
                    color: #aaa;
                    font-weight: bold;
                }
            }

            .layout-body {
                height: calc(100vh - 112px);
                width: 1200px;
                margin-top: 14px;
                margin-left: 1px;
                padding: 14px;
                background-color: @second-bg-color;
                border-radius: 8px;
                overflow-y: auto;
            }
        }
    }
}
</style>